---
title: Skeleton
description: Use to show a placeholder while content is loading.
---

{/* Work in progress */}

<ComponentPreview
  name="skeleton/demos/card"
  preview={`<Skeleton className="h-44 w-64" />
  <div>
    <Skeleton className="size-10 rounded-full" />
    <div>
      <Skeleton className="h-4 w-44" />
      <Skeleton className="h-4 w-36" />
    </div>
  </div>`}
/>

## Installation

```package-install
npx shadcn@latest add @dotui/skeleton
```

## Usage

Use the `Skeleton` component to show a placeholder while content is loading.

## Options

## Children

If you do not pass a fixed size, skeleton will take the size of the children.

<ComponentPreview
  name="skeleton/demos/children"
  preview={`<Skeleton>
    <Button>Button</Button>
  </Skeleton>`}
/>

## Show

Use the `show` prop to show/hide the skeleton.

<ComponentPreview
  name="skeleton/demos/show"
  preview={`<Skeleton>
    <Button>Button</Button>
  </Skeleton>
  <Skeleton show={false}>
    <Button>Button</Button>
  </Skeleton>`}
/>

## Examples

### Loading data from an API

{/* prettier-ignore-start */}

<ComponentPreview
  name="skeleton/demos/api-simulation"
  preview={`const [status, setStatus] = React.useState<"idle" | "loading" | "error" | "success">("idle");
  const apiCall = () => {
    {/* Simulate API call */}
  };

  return (
    <div>
      <Button isLoading={status === "loading"} onPress={apiCall}>
        Simulate API Call
      </Button>
      <Skeleton show={status === "loading"}>
        <p>Some text loaded from API.</p>
      </Skeleton>
    </div>
  );`}
/>

{/* prettier-ignore-end */}

### Wrapping children with fixed size

If you do not pass a fixed size, it will be calculated automatically.

<ComponentPreview
  name="skeleton/demos/fixed-size-children"
  preview={`<Skeleton className="size-20"><Button>Button</Button> </Skeleton>`}
/>

## API Reference

`Skeleton` accepts all HTML `div` element props and the following:

| Prop   | Type      | Default | Description                                |
| ------ | --------- | ------- | ------------------------------------------ |
| `show` | `boolean` | `true`  | Weather the visual style should be filled. |
